<template>
  <div>
    <q-card flat bordered class="bg-white">
      <q-card-section class="q-pa-sm">
        <div class="row items-center no-wrap">
          <div class="col">
            <q-chip v-if="!$q.platform.is.mobile" square class="no-border-radius q-ml-none q-mr-none">
              <q-avatar class="no-border-radius" icon="assignment" color="light-blue" text-color="white"></q-avatar>
              Work Order
            </q-chip>
            <q-chip square class="no-border-radius q-ml-none q-mr-none border-grey-3" color="white" text-color="light-blue">
              <q-avatar v-if="$q.platform.is.mobile" class="no-border-radius" icon="assignment" color="light-blue" text-color="white"></q-avatar>
              QEWEBWO123456789
            </q-chip>
            <q-chip square class="no-border-radius q-ml-none q-mr-none">
              <q-avatar v-if="!$q.platform.is.mobile" class="no-border-radius" icon="bookmark" color="light-green" text-color="white"></q-avatar>
              T-temp
            </q-chip>
          </div>

          <div class="col-auto">
            <q-btn color="grey-7" round flat icon="more_vert">
              <q-menu cover auto-close>
                <q-list>
                  <q-item clickable>
                    <q-item-section>操作 1</q-item-section>
                  </q-item>
                  <q-item clickable>
                    <q-item-section>操作 2</q-item-section>
                  </q-item>
                  <q-item clickable>
                    <q-item-section>操作 3</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-section class="row justify-start q-gutter-y-sm q-py-sm">
        <q-input class="col-lg-3 col-md-3 col-sm-4 col-xs-6" v-model="form.fieldOne" label="期间" stack-label readonly borderless/>
        <q-input class="col-lg-3 col-md-3 col-sm-4 col-xs-6" v-model="form.fieldTwo" label="状态" stack-label readonly borderless/>
      </q-card-section>
    </q-card>
    <q-card flat bordered class="bg-white q-mt-sm">
      <q-card-section class="q-pa-none">
        <q-tabs
          v-model="currentTab"
          narrow-indicator
          dense
          align="left"
          class="bg-light-blue text-white"
        >
          <q-tab name="one" label="工作明细" />
          <q-tab name="two" label="会计管理" />
          <q-tab name="three" label="供方" />
          <q-tab name="four" label="管理" />
          <q-tab name="five" label="时间和费用" />
          <q-tab name="six" label="审批审计" />
          <q-tab name="seven" label="相关文件" />
        </q-tabs>
        <q-tab-panels v-model="currentTab" animated>
          <q-tab-panel name="one" class="q-pa-none">
            <q-table
              class="no-shadow no-border-radius"
              dense :grid="grid"
              :data="tableConfig.tables"
              :columns="tableConfig.cols"
              row-key="code"
              table-class="h-custom"
            >
              <template v-slot:top-left="props">
                <div class="q-py-sm">
                  <q-btn size="sm" color="light-blue" label="新增"/>
                  <q-btn size="sm" color="light-blue" label="删除" class="on-right"/>
                </div>
              </template>
              <template v-slot:top-right="props">
                <div class="q-py-sm">
                  <q-toggle
                    v-model="isGrid"
                    label="Grid列表"
                  />
                </div>
              </template>
              <q-td slot="body-cell-actions" scope-slot="props" align="center">
                <q-btn-dropdown
                  color="blue"
                  size="sm"
                  dense
                  menu-anchor="bottom left"
                  menu-self="top left"
                  content-class="text-grey"
                  icon="settings"
                >
                  <q-list dense>
                    <q-item clickable v-close-popup>
                      <q-item-section>
                        <q-item-label>编辑</q-item-label>
                      </q-item-section>
                    </q-item>

                    <q-item clickable v-close-popup>
                      <q-item-section>
                        <q-item-label>删除</q-item-label>
                      </q-item-section>
                    </q-item>

                    <q-item clickable v-close-popup>
                      <q-item-section>
                        <q-item-label>更多字段</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
              </q-td>
            </q-table>
          </q-tab-panel>
          <q-tab-panel name="two"></q-tab-panel>
          <q-tab-panel name="three"></q-tab-panel>
          <q-tab-panel name="four"></q-tab-panel>
          <q-tab-panel name="five"></q-tab-panel>
          <q-tab-panel name="six"></q-tab-panel>
          <q-tab-panel name="seven"></q-tab-panel>
        </q-tab-panels>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        fieldOne: '04/02/19-07/06/19',
        fieldTwo: '待审核'
      },
      currentTab: 'one',
      tableConfig: {
        tables: [
          {
            code: 'QEWEBJB10000001',
            start: '4-25-19',
            stop: '4-25-19',
            todo: 'Leo',
            do: 'John',
            company: 'OYO',
            site: 'suzhou',
            location: 'OYO-001'
          },
          {
            code: 'QEWEBJB10000002',
            start: '4-25-19',
            stop: '4-25-19',
            todo: 'ben',
            do: 'David',
            company: 'OYO',
            site: 'suzhou',
            location: 'OYO-002'
          }
        ],
        cols: [
          {
            name: 'actions',
            label: '操作',
            align: 'center'
          },
          {
            name: 'code',
            field: 'code',
            label: '工作代码',
            align: 'left'
          },
          {
            name: 'start',
            field: 'start',
            label: '开工日期',
            align: 'left'
          },
          {
            name: 'stop',
            field: 'stop',
            label: '完工日期',
            align: 'left'
          },
          {
            name: 'todo',
            field: 'todo',
            label: '工作执行人',
            align: 'left'
          },
          {
            name: 'do',
            field: 'do',
            label: '劳动人员姓名',
            align: 'left'
          },
          {
            name: 'company',
            field: 'company',
            label: '公司',
            align: 'left'
          },
          {
            name: 'site',
            field: 'site',
            label: '工作地点',
            align: 'left'
          },
          {
            name: 'location',
            field: 'location',
            label: '工作位置',
            align: 'left'
          }
        ]
      },
      isGrid: false
    }
  },
  computed: {
    grid () {
      return this.$q.platform.is.mobile && this.isGrid
    }
  },
  created () {
    this.handler()
  },
  methods: {
    handler () {
    }
  }
}
</script>

<style lang="stylus" scoped>
  .border-grey-3
    border 1px solid $grey-3
</style>
